﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link type="text/css" title="combobox" href="css/jQuery.CustomCombobox.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.CustomCombobox-1.2.1.js"></script> 

<script type="text/javascript">
    $().ready(function() {

        function TestClass() {
            this.ID = "";
            this.IssueNum = "";
            this.ImageUrl = "";
            this.Notes = "";
        }

        var Issues = [3];
        var Issue = new TestClass();
        Issue.ID = 1;
        Issue.IssueNum = "1a";
        Issue.ImageUrl = "Cover01.png";
        Issue.Notes = "Spiderman dies in this one";
        Issues[0] = Issue;

        Issue = new TestClass();
        Issue.ID = 2;
        Issue.IssueNum = "3";
        Issue.ImageUrl = "Cover02.png";
        Issue.Notes = "";
        Issues[1] = Issue;

        Issue = new TestClass();
        Issue.ID = 3;
        Issue.IssueNum = "5";
        Issue.ImageUrl = "Cover03.png";
        Issue.Notes = "Great cover!";
        Issues[2] = Issue;

        Issue = new TestClass();
        Issue.ID = 4;
        Issue.IssueNum = "10";
        Issue.ImageUrl = "Cover04.png";
        Issue.Notes = "Some notes about something.";
        Issues[3] = Issue;


        var Template = "<div style='border-top:1px gray dashed;'>" +
                            "<img src='{ImageUrl}'/>" +
                            "<b>Notes:</b>{Notes}" +
                       "</div>" +
                       "<div style='margin-left:45px'>" +
                        "<b>{IssueNum}</b>" +
                       "</div>";

        var aryData = ['hey', 'you', 'guys'];
        //var Template = "<div><b>{}</b></div>";

        var c = $(".Issue").customcombobox(Issues, {
            //var c = $(".Issue").customcombobox(aryData,{
            width: 500,
            template: Template,
            //topMsg: "Pick an issue...",
            displayPropertyName: "IssueNum",
            //initialIndex: 3,
            //initialValue: "3",
            maxVisibleRows: 6,
            //idPropertyName: "ID",
            //initialValueByID: 3,
            useEdgeDetection: true,
            onSelect: function(item) {
                //alert(item.data("source").IssueNum);
            }
        });
        


    });
</script>
</head>

<body>
<div style="height:600px;"></div>
<br/>
<div class="Issue"></div>
<br/>
<div class="Issue"></div>
<br/>
<div class="Issue"></div>
<br/>
<div style="height:600px"></div>
</body>

</html>
